<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>设备监控管理</title>
<link rel="stylesheet" href="/res/layui/css/layui.css"  media="all">
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
<link rel="stylesheet" href="/res/css/equipmentDate/main.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="/res/css/equipmentDate/yunxingindex.css" rel="stylesheet" type="text/css">
<style>
    .tabledata{
		border-collapse: collapse;
		border: 0px solid #999;
		width:90%;
		height:95%;
		margin:0px auto;
		overflow: auto;
		table-layout: fixed
		
	}
	
.tabledata td {
	border-top: 0;
	/* border-right: 1px solid #999; */
	border-bottom: 1px solid #07398a;
	border-left: 0;
	padding:10px;
	height:28px;
	white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}
.yicieqPar .tabledata td {
	border-bottom: 0px solid #07398a!important;
}
.tabledata tr{
	height:30px;
	cursor: pointer;
}
</style>

</head>
<body>
    <!--  头部 -->
    <div id="headerDIV" class=""></div>	
	<!-- 主题部分 -->
	<div class="i_main">
	    <div class="h_100" >
	        <!-- 左侧部分   -->		    
		    <div class="h_100 dblock lockbg ml_1" style="width:18%">
		        <span class="bss"></span><span class="bss"></span><span class="bss"></span><span class="bss"></span>
	        	<div style="height:26%;width:100%">
	                <h3 class="fc_1 fs_5 TitleNameYW">电力运行日报</h3>
	                <ul id="" class=" yunxinribao  w_100">
	                     <li>
	                         <p class="fc_1 fs_4">正常运行</p>
	                         <p class="fs_3 gradient-text-one">128</p>
	                     </li>
	                     <li>
	                         <p class="fc_1 fs_4">正在维修</p>
	                         <p class="fs_3 gradient-text-two">128</p>
	                     </li>
	                </ul>
	                <ul id="" class="yunxinribao  w_100">
	                     <li>
	                         <p class="fc_1 fs_4">正常故障</p>
	                         <p class="fs_3 gradient-text-three">128</p>
	                     </li>
	                     <li>
	                         <p class="fc_1 fs_4">设备运转率</p>
	                         <p class="fs_3 gradient-text-four">128</p>
	                     </li>
	                </ul>
	            </div>
	            <div class="division">
	               <h3 class="fc_1 fs_5 TitleNameYW">近七日告警统计</h3>
	               <div id="gaojing" class="eachartsH w_100" ></div>
	            </div>
	            <div class="division">
	                <h3 class="fc_1 fs_5 TitleNameYW">最近七日告警等级比例</h3>
	                <div id="dengji" class="eachartsH w_100"></div>
	            </div>
		    </div>
		    <!--  中间部分开始-->
		    <div class="h_100 dblock ml_1" style="width:60%;position: relative;">
		        <div class="main_top_echarts_con h_100 w_100" >
	                <div class="topscreen" style="float: right;margin-right: 100px;"> <a type="button" id="fullscreen" class="layui-btn layui-btn-sm layui-btn-primary"><i class="layui-icon">&#xe622;</i>   切换全屏 </a> </div>              
	                <div id="container" class="h_100 w_100"></div>
	            </div>
	            <div class="threemain">
		            <div class="lockbg threeconter" style="height: 28%;">
		                <span class="bss"></span><span class="bss"></span><span class="bss"></span><span class="bss"></span>
		                <div class="w_100 h_100">
		                   <h3 class="fc_1 fs_5 TitleNameYW2">一次设备220KV</h3>
		                   <div class="yicieqPar">
		                     <table class="fc_1 tabledata" id="">
								  <tbody>								    
								    <tr>
								      <td title="呼市金沙变电站">2B48线间隔</td>
								    </tr>
								    <tr>
								      <td title="呼市金沙变电站">2号主变</td>
								    </tr>
								    <tr>
								      <td title="呼市金沙变电站">3A线间隔</td>
								    </tr>
								    <tr>
								      <td title="呼市金沙变电站">220KV电容器2</td>
								    </tr>							    
								  </tbody>
				               </table>
		                   </div>
		                </div>         
			        </div>
			        <div class="lockbg threeconter mt_2" style="height:35%">
		                <span class="bss"></span><span class="bss"></span><span class="bss"></span><span class="bss"></span>
		                <div class="w_100 h_100">
		                   <h3 class="fc_1 fs_5 TitleNameYW2">一次设备110KV</h3>
		                   <div class="yicieqPar">
		                     <table class="fc_1 tabledata" id="">
								  <tbody>
								    <tr>
								      <td title="呼市金沙变电站">110KV电容器</td>
								    </tr>
								    <tr>
								      <td title="呼市金沙变电站">110KV电抗器</td>
								    </tr>
								    <tr>
								      <td title="呼市金沙变电站">一体化电源</td>
								    </tr>
								    <tr>
								      <td title="呼市金沙变电站">5B138线间隔</td>
								    </tr>
								    <tr>
								      <td title="呼市金沙变电站">8号主变</td>
								    </tr>
								    </tr>							    
								  </tbody>
				               </table>
		                   </div>
		                </div>         
			        </div>
			        <div class="lockbg threeconter mt_2" style="height:34%">
		                <span class="bss"></span><span class="bss"></span><span class="bss"></span><span class="bss"></span>
		                <div class="w_100 h_100">
		                   <h3 class="fc_1 fs_5 TitleNameYW2">一次设备10KV</h3>
		                   <div class="yicieqPar">
		                     <table class="fc_1 tabledata" id="">
								  <tbody>
								    <tr>
								      <td title="呼市金沙变电站">一体化电源</td>
								    </tr>
								    <tr>
								      <td title="呼市金沙变电站">2B48线间隔</td>
								    </tr>
								    <tr>
								      <td title="呼市金沙变电站">21号主变</td>
								    </tr>
								    <tr>
								      <td title="呼市金沙变电站">3A线间隔</td>
								    </tr>
								    <tr>
								      <td title="呼市金沙变电站">10KV电容器2</td>
								    </tr>							    
								  </tbody>
				               </table>
		                   </div>
		                </div>         
			        </div>
		        </div>
		    </div>
		    <!--  右侧部分开始-->
		    <div class="h_100 dblock lockbg mr_1" style="width:18%;float:right">
		        <span class="bss"></span><span class="bss"></span><span class="bss"></span><span class="bss"></span>
	        	<div class="w_100" style="height:50%">
	                <h3 class="fc_1 fs_5 TitleNameYW">故障处理简报</h3>
	                <ul class="GUJBUL">
	                   <li class="fc_1 fs_4"><p>短路故障</p></li>
	                   <li>
	                       <div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="DLGZ" >
							  <div  class="layui-progress-bar layui-bg-blue" lay-percent="50%"></div>
						   </div>
	                   </li>
	                   <li class="fc_1 fs_4"><p>断相故障</p></li>
	                   <li>
	                       <div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="DXGZ" >
							  <div  class="layui-progress-bar layui-bg-green" lay-percent="50%"></div>
						   </div>
	                   </li>
	                   <li class="fc_1 fs_4"><p>复杂故障</p></li>
	                   <li>
	                       <div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="FZGZ" >
							  <div  class="layui-progress-bar layui-bg-orange" lay-percent="50%"></div>
						   </div>
	                   </li>
	                   <li class="fc_1 fs_4"><p>自然灾害引起得故障</p></li>
	                   <li>
	                       <div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="ZHGZ" >
							  <div  class="layui-progress-bar layui-bg-red" lay-percent="50%"></div>
						   </div>
	                   </li>
	                </ul>	                	
	            </div>
	            <div class="division w_100 prelative" style="height:50%;">
	               <h3 class="fc_1 fs_5 TitleNameYW">电力检测简报</h3>
	               <table class="fc_1 tabledata"  id="" >
                      <thead>
		                <tr>
		                  <td>时间</td>
		                  <td>等级</td>
		                  <td>设备</td>
		                 </tr>
		             </thead>
		           </table> 
	               <div class="subdiv">  
		                  <table class="fc_1 tabledata"  id="" >
							  <tbody>
							    <tr>
							      <td title="20210227">20210227</td>
							      <td title="异常">异常</td>
							      <td title="呼市金沙变电站">220KV电抗器</td>
							    </tr>
							    <tr>
							      <td title="20210227">20210227</td>
							      <td title="异常">异常</td>
							      <td title="呼市金沙变电站">220KV电抗器</td>
							    </tr>
							    <tr>
							      <td title="20210227">20210227</td>
							      <td title="异常">异常</td>
							      <td title="呼市金沙变电站">220KV电抗器</td>
							    </tr>
							    <tr>
							      <td title="20210227">20210227</td>
							      <td title="异常">异常</td>
							      <td title="呼市金沙变电站">220KV电抗器</td>
							    </tr>
							    <tr>
							      <td title="20210227">20210227</td>
							      <td title="异常">异常</td>
							      <td title="呼市金沙变电站">220KV电抗器</td>
							    </tr>
							    <tr>
							      <td title="20210227">20210227</td>
							      <td title="异常">异常</td>
							      <td title="呼市金沙变电站">220KV电抗器</td>
							    </tr>
							    <tr>
							      <td title="20210227">20210227</td>
							      <td title="异常">异常</td>
							      <td title="呼市金沙变电站">220KV电抗器</td>
							    </tr>
							    <tr>
							      <td title="20210227">20210227</td>
							      <td title="异常">异常</td>
							      <td title="呼市金沙变电站">220KV电抗器</td>
							    </tr>
							  </tbody>
			               </table>
		               </div>
	            </div>
		    </div>
		</div>
    </div>		    
</body>
</html>
<script src="/res/js/common/jquery-3.2.1.min.js"></script>
<script src="/res/js/common/echarts.min.js"></script>
<script src="/res/js/common/app.js"></script>
<script src="/res/js/validate.js"></script>
<script src="/res/layui/layui.js"></script>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=00dc968653b9f8fdb72e2a703108a498&plugin=AMap.MarkerClusterer"></script>
<script src="/res/js/equipment/date/header.js"></script>
<script src="/res/js/equipment/date/yunxingindex.js"></script>